<template>
    <div class="container">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
            <el-form-item label="主机名称">
                <el-input
                        v-model="searchInfo.virtual_name"
                        placeholder="请输入主机名称"
                        clearable
                />
            </el-form-item>
            <el-form-item label="IP地址" prop="ip_address">
                <el-input
                        v-model="searchInfo.ip_address"
                        placeholder="请输入IP地址"
                        clearable
                />
            </el-form-item>
            <el-form-item label="环境名称" prop="env_name">
                <el-select clearable  placeholder="请选择" v-model="searchInfo.env_name" style="width:100%">
                    <el-option
                            v-for="dict in EnvOptions"
                            :key="dict.item_value"
                            :label="dict.item_name"
                            :value="dict.item_value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                        class="filter-item"
                        type="primary"
                        icon="el-icon-search"
                        @click="handleQuery"
                >搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                border
                style="width: 100%"
        >
            <el-table-column label="ID" width="50" prop="ID">
                <template slot-scope="scope">{{scope.row.ID}}</template>
            </el-table-column>
            <el-table-column label="虚拟主机名" prop="virtual_name" ></el-table-column>
            <el-table-column label="服务器机房" prop="server_idc" >
                <template slot-scope="scope">{{scope.row.server_idc | basecode(scope.row.server_idc,'server_idc')}}</template>
            </el-table-column>
            <el-table-column label="ip地址" prop="ip_address"  ></el-table-column>
            <el-table-column label="操作系统" prop="os_system" ></el-table-column>
            <el-table-column label="环境" prop="env_name" >
                <template slot-scope="scope">{{scope.row.env_name | basecode(scope.row.env_name,'env_name')}}</template>
            </el-table-column>
            <el-table-column label="核数" prop="cpu_num" ></el-table-column>
            <el-table-column label="内存" prop="mem_info" ></el-table-column>
            <el-table-column label="磁盘" prop="disk_space" ></el-table-column>
            <el-table-column label="日期" >
                <template slot-scope="scope">{{scope.row.CreatedAt|formatDate}}</template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button @click="createAnsibleHostCmdInit(scope.row)" icon="el-icon-circle-check" size="small" type="primary">初始化</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <comp-ansible-init :obj="formData" :visible.sync="termVisible" @afterClose="doAfterClose"></comp-ansible-init>
    </div>
</template>

<script>
    import {
        getServerList,
    } from "@/api/cmdb_server";
    import infoList from "@/mixins/infoList";
    import CompAnsibleInit from "./CompAnsibleInit";
    export default {
        name: "initialization",
        mixins: [infoList],
        components: {CompAnsibleInit},
        data() {
            return {
                listApi: getServerList,
                EnvOptions:[],
                termVisible: false,
                searchInfo: {
                    virtual_name: null,
                    ip_address: null,
                    env_name: null,
                    status:null
                },
                formData: {}
            }
        },
        methods:{
            handleQuery() {
                this.searchInfo.status = 0
                this.getTableData()
            },
            doAfterClose() {
                this.termVisible = false
                this.searchInfo.status = 0
                this.getTableData();
            },
            createAnsibleHostCmdInit(row){
                this.formData = row;
                this.termVisible = true
            }
        },
        async created() {
            this.EnvOptions = this.getDicItemList('env_name')
            this.searchInfo.status = 0
            await this.getTableData();
        }
    }
</script>

<style scoped>

</style>
